<template>
	<view>
		<view id="container"></view>
	</view>
</template>

<script>
	import * as THREE from "three";
	import { PLYLoader } from "three/addons/loaders/PLYLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
	export default {
		data() {
			return {
				camera: null,
				scene: null,
				renderer: null,
				mesh: null,
				controls: null,
			};
		},
		mounted() {
			this.init();
			this.animate();
		},
		methods: {
			//初始化
			init: function () {
				//  创建场景对象Scene
				this.scene = new THREE.Scene();

				//网格模型添加到场景中
				// let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
				let loader = new PLYLoader();
				loader.load(
					"threeModel/2024-07-17_100_482_卢亚娟_董粉英-LowerJaw.ply",
					(geometry) => {
						geometry.computeVertexNormals();
						// let material = new THREE.MeshNormalMaterial({
						// 	color: 0x000000,
						// 	// vertexColors: THREE.VertexColors,
						// });
						let material = new THREE.MeshMatcapMaterial({ color: 0xffffff });
						this.mesh = new THREE.Mesh(geometry, material);
						this.mesh.scale.set(0.025, 0.025, 0.025);
						this.scene.add(this.mesh);
					}
				);

				// let material = new THREE.MeshNormalMaterial({
				// 	color: "white",
				// });
				// this.mesh = new THREE.Mesh(geometry, material);

				// this.scene.add(this.mesh);

				/**
				 * 相机设置
				 */
				let container = document.getElementById("container");
				this.camera = new THREE.PerspectiveCamera(
					70,
					container.clientWidth / container.clientHeight,
					0.01,
					10
				);
				this.camera.position.z = 1;

				/**
				 * 创建渲染器对象
				 */
				this.renderer = new THREE.WebGLRenderer({ antialias: true });
				this.renderer.setSize(container.clientWidth, container.clientHeight);
				container.appendChild(this.renderer.domElement);

				//创建控件对象
				this.controls = new OrbitControls(
					this.camera,
					this.renderer.domElement
				);
			},

			// 动画
			animate: function () {
				requestAnimationFrame(this.animate);
				// this.mesh.rotation.x += 0.01;
				// this.mesh.rotation.y += 0.02;
				this.renderer.render(this.scene, this.camera);
			},
		},
	};
</script>

<style>
	#container {
		position: absolute;
		width: 100%;
		height: 100%;
	}
</style>
